<template>
  <div style="padding:auto 10px;font-family: 'Roboto Slab'">
      <div v-if="submissions.contents.length > 0">
        <section 
            v-for="c in submissions.contents" 
            :key="c.id"
            style="margin:10px 5px 30px 5px;border-radius:2em;padding:15px;"
            >
            <div style="display:flex;justify-content: space-between;">
                <div>
                    <p class="icon solid fa-pen">&ensp;
                    成员姓名:&emsp;
                    {{ c.owner.name }} &emsp;&emsp;&emsp;&emsp;&emsp;ID {{ c.owner.id }}
                </p>
                <p class="icon solid fa-pen">&ensp;
                    加入作业的时间:&emsp;
                    {{ makePrettyTime(c.CreatedAt) }}
                </p>
                <p class="icon solid fa-pen">&ensp;
                    提交文件名:&emsp;
                    {{ c.FileName }}
                </p>
                </div>
                <div style="display:inline;">
                    <p :class="`icon solid fa-${c.Finished ? 'smile' : 'frown'}`" 
                    :style="`font-size:15px;width: fit-content;border-radius:1.5em;color:white;padding:8px 18px;
                        background-color:${c.Finished ? '#44ce40' : '#f44a40'}`">&ensp;
                    {{ c.Finished ? "已完成" : "未完成" }}  
                    </p>
                    <el-tooltip :content="c.Finished ? '下载该成员作业的副本' : '该成员暂无提交记录，你无法下载'" placement="top" effect="dark">
                        <button
                        class="icon solid fa-download"
                        :style="`
                        font-size:12px;
                        border-radius:.5em;
                        color:white;
                        margin: 40px 0 0;
                        border : 0 !important;
                        box-shadow: 0 0 0 0 !important;
                        background-color:${c.Finished ? 'var(--mainColor)' : 'gray'} !important;
                        cursor: ${c.Finished ? 'pointer' : 'not-allowed'};`
                        "
                        @click="download.handleDownload(c.id)"
                        >
                        
                        &ensp;下载
                     </button>
                    </el-tooltip>
                    
                    
                </div>
            </div>
        </section> 
      </div>

      <div v-else>
          <el-empty description="暂时没有提交信息" :size="200"/>
      </div>

  </div>
</template>

<script>
import { onMounted, computed, reactive } from "vue"
import { ElNotification, ElLoading } from "element-plus"
import { makePrettyTime } from "@/hook/format"
import { useStore } from "vuex"

export default {
    name : "submission",
    props : ["homeworkID"],
    setup(props) {
        let homeworkID = props.homeworkID
        let store = useStore()

        onMounted(() => {
            const loading = ElLoading.service({
                lock: true,
                text: "正在加载提交数据中...",
                background: "rgba(0, 0, 0, 0.8)",
                customClass: "MyLoading",
            });
            store.dispatch("submissions", {homeworkID}).then(() => {
                loading.close()
                if (store.state.opSuccess === true) {
                    store.state.opSuccess = undefined
                }
                else {
                    ElNotification({title: "查询失败！", message: "原因:" + store.state.error})
                }
            })
        })

        let submissions = reactive({
            contents : computed(() => store.state.homework.submissions)
        })
        

        let download = reactive({
            handleDownload(submissionID) {
                submissionID = parseInt(submissionID)
                store.dispatch("getFileSubmissionID", {submissionID})
            }
        })

        return {
            submissions,
            download,
            makePrettyTime
        }

    }
}
</script>

<style>

</style>